Hello and welcome to this feat you in this video.
We aren't going to create the canvas object in our previous video in our haste TMF file.
We added the hastier mail Campbell's element to the page using this tag here.
So now going to create a new file which is going to be a javascript far.
So going to click on the file option and click new and I'm going to save that file as a clock.
I'm going to call it a clock.
Dot g s.
And inside this drop down here are just sell it.
This javascript option and click save.
So we now have a javascript file system of Far.
So let's create a canvas update.
We're going to use a variable to do that.
So here we created a canvas object from the hastier mail canvas element so you can see we use in the
documented case element.
And the ideas come about which is this here from the hit here mail element.
All right so here we have now created his canvas object.
The next thing we're going to do we have one to create a two deep drawn object.
Again we're going to use a very sound line to hear.
Got a variable called city X city Expo.
Stands for context.
So we set in that to you Kwas to canvas.
Don't quite get context.
An inside were Pass in it too.
So this will create a two to draw an object for the canvas object.
Next in I want to do is calculate the clock radius using the height of the canvas so to calculate the
clock radius is in the height of the compass.
We add a variable quote radius and said that two equals two did come back.
Height divided by two.
By using the canvas height to calculate the clock radius it makes like clock work for all canvas sizes
so regardless of the size of your canvas the clock should work.
The next line of course I want to add business we is going to remap the position which is the X and
Y axis is going to remove them which is going to be the actual position of the drawing objects.
It's going to remap it to the centre of the canvas so we use in the sticks which is this variable here.
There's variable here.
Translate I will pass in the radios and the rate is basically what this will do.
It will remap the position zero and zero.
So the zero would be on the x axis and C row on the y axis or here in maps it to position the drawing
an object at the centre of the canvas blakeson I want to do is I want to reduce the clock radius to
about 90 percent saw.
To draw the clock so that the clock when the clock is drawn it is drawn inside the compass.
Next And I want to do is create a function that will be used to draw the clock to save time.
I have added the function that would be used to draw the face of the clock so this is a function here
to to create a function you type in the keyword function followed by the name you want to call the functions
of call the function drop clock.
When creating functions.
Good idea to name the function to reflect the work or what the function will do.
And inside the curly braces is the outroar code that will be responsible for drawing in the face of
the clock.
So here we've quote the context.
Ask the dot ark method.
Physically is used to create an arc or a curve which is.
To Croods schools or parts of the circle and inside.
Parentheses for this ark method we've got different arguments or parameters.
So this bizarre akeley is used to draw the actual arc of the circle position it and that is here we've
the Rangers and also we've got the maths that PI mythically the master PI property represents the reissue
of the conference of the circle to the diameter of the circle of mass of Pi property represents the
ratio of the second conference of is so cool to its diameter which is approximately three point 1 4
1 5 9 on line 10.
Here will quote a context.
We'll start with giving it a collar or white.
Basically this is a column that used to feel the face off the circle that has been drawn by this clock
so the actual face of the clock is going to be white.
We're achieving that using this method called context.
Don't feel so tyred this Phil style method is what gives the clock a white face background you can specify
any but in this case I've just used white.
You can also use the context of Phil's property to return the carlaw the gradient or a pattern you use
feeling the drawing on line 11 and we've got the field method.
Basically this is used to feel the current path of the drawing so it fills the current prime path and
the default colour is black.
When you create a function for the function to do its job you have to call it or reference it so you
can see here on line 6.
I have added a reference to this clock so it's going to draw that calling the function.
Here's going to draw this clock you draw the face of the clock here.
Inside this place this you can call it function from anywhere.
I'm calling it from here.
So when this chord when this lines of call read any comms hear it.
Then draw the clock.
Use in or is in this code.
In between the curly braces.
Okay so next time I want to have actually done it but I'm just going to tell why I created a CSA file
here.
So basically the file you create the file the same way you go to file a new new file and then save it
in to your relevant directory.
So basically it is a biz in style in the body giving the actual body type background.
A lot of black.
This is black in hex value.
The compass position and that someone to come has to be position in a certain way.
So I want there to be some margin from the left and I am giving the value of 300 pixels and I want there
to be a mile from the top.
Give in if the pics are basically saying from the left.
Move it to 300 pixels out from the top.
Move it down 50 pixels so I'm going to save that.
And now we can test the clock.
So this is a clock so you should get something like this.
This is the actual face of the clock.
So if he can see something like me then congratulations.
We are on the same page.
So that's basically it for this lecture.
We've got a few more functions to go to get the clock working properly so thanks for watching.
Bye for now.